<script setup>
import NewsItem from '@/components/NewsItem.vue'
import Position from '@/components/Position.vue'
import FooterBorder from '@/components/FooterBorder.vue'
import { computed, ref } from 'vue';
import { useStore } from 'vuex'

const store = useStore()

const newsList = computed(() => store.getters.getNewsList)

let pageSize = 3; // 每页显示条目数
let currentPage = 1; // 当前页码
const totalItems = computed(() => newsList.value.length) //总记录数

let startIndex = (currentPage - 1) * pageSize
let endIndex = startIndex + pageSize
let currentNewsList = ref(newsList.value.slice(startIndex, endIndex))

const handlePageChange = (newPage) => {
    currentPage = newPage
    startIndex = (currentPage - 1) * pageSize
    endIndex = startIndex + pageSize
    currentNewsList.value = newsList.value.slice(startIndex, endIndex)
}

const handleSizeChange = (newPageSize) => {
    pageSize = newPageSize
    startIndex = (currentPage - 1) * pageSize
    endIndex = startIndex + pageSize
    currentNewsList.value = newsList.value.slice(startIndex, endIndex)
}

</script>

<template>
    <div class="content">
        <div class="top-image"></div>
        <Position>
            <template #default>
                布宫动态
            </template>
        </Position>
        <div class="container">
            <div class="bt">
                <a href="#">布宫动态</a>
                <span></span>
            </div>

            <!-- 循环渲染当前页的新闻列表 -->
            <NewsItem v-for="newsItem in currentNewsList" :key="newsItem.id" :news="newsItem"></NewsItem>

            <!-- el-pagination 分页组件 -->
            <el-pagination style="margin-top: 20px;margin-left: 10px;" :current-page="currentPage" :page-size="pageSize"
                :page-sizes="[1, 3, 5, 7]" layout="total, sizes, prev, pager, next, jumper" :total="totalItems"
                @size-change="handleSizeChange" @current-change="handlePageChange" />

        </div>
        <FooterBorder></FooterBorder>
    </div>
</template>

<style scoped>
.top-image {
    height: 257px;
    background-image: url('@/assets/news.jpg');
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-position: center center;
}

.container {
    width: 960px;
    margin: 0 auto;
    padding: 60px 0;
}

.bt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    /* border: 2px solid #941200; */
    border-top: 2px solid #941200;
    border-bottom: 2px solid #941200;
    margin-bottom: 30px;
}

.bt>span {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: url('@/assets/more4.gif');
    background-position: center center;
    background-repeat: no-repeat;
}

.bt>a {
    text-decoration: none;
    color: #941200;
    /* background-color: #941200; */
    font-size: 18px;
    width: 96px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
</style>